<template>
    <div>
        <VueDragResize
            :isActiyve="true"
            :w="175"
            :h="400"
            v-on:resizing="resize"
            v-on:dragging="resize"
            :isResizable="false"
            :parentLimitation="true"
            :parentW="w"
            :parentH="h"
            :x="80"
            :y="47"
            style="background-color: rgba(255, 255, 255, 0.2)"
        >
            <el-row style="background-color: rgba(255, 255, 255, 0.2); z-index: 100">
                <h4 style="text-align: center; margin: 5px">智能预测</h4>
                <div style="text-align: center; font-size: 12px">
                    共有<span style="color: #10a1df">{{ totalCount }}</span>个可疑区
                </div>
                <el-row>
                    <el-table
                        :data="
                            tableData.slice(
                                (pageCurrent - 1) * pageSize,
                                pageCurrent * pageSize
                            )
                        "
                        style="
                            width: 100%;
                            background-color: rgba(255, 255, 255, 0.2);
                        "
                        size="mini"
                        ref="AIF"
                        :highlightCurrentRow="true"
                        @current-change="handleCurrentChange"
                        :header-cell-style="{
                            'background-color': 'rgba(255,255,255,0.6)',
                            cursor: 'pointer',
                            color: '#777C7C',
                            'font-weight': '400',
                            'font-size': '15px',
                            'text-align': 'center',
                        }"
                        :row-class-name="tableRowClass"
                        :row-style="isRed"
                    >
                        <el-table-column
                            fixed
                            :index="getIndex"
                            type="index"
                            label="序号"
                            align="center"
                            width="60"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="index"
                            label="AI"
                            width="115"
                        >
                        </el-table-column>
                    </el-table>
                </el-row>
                <el-row>
                    <el-pagination
                        small
                        style="
                            text-align: center;
                            white-space: pre-wrap;
                            padding: 0;
                        "
                        @current-change="pageJumpTo"
                        @size-change="pagesizeChange"
                        :current-page="pageCurrent"
                        :page-size="pageSize"
                        :pager-count="5"
                        layout="prev, pager, next, total"
                        :total="tableData.length"
                    >
                    </el-pagination>
                </el-row>
                <!-- <el-col :span="12">
                    <span>智能分析</span>
                    <el-tabs v-model="AITab">
                    <el-tab-pane label="胃镜" name="first">胃镜</el-tab-pane>
                    <el-tab-pane label="电子病历" name="second">电子病历</el-tab-pane>
                    <el-tab-pane label="检查" name="third">检查</el-tab-pane>
                    </el-tabs>
                </el-col> -->
            </el-row>
        </VueDragResize>
    </div>
</template>

<script>
import VueDragResize from 'vue-drag-resize'

export default {
  props: ['AIdata'],
  name: 'AIFloating',

  components: {
    VueDragResize
  },

  data() {
    return {
      changeIndex: 0,
      totalCount: 0,
      pageCurrent: 1,
      pageSize: 15,
      //   AITab: 'first',
      width: 0,
      height: 0,
      top: 0,
      w: document.documentElement.clientWidth,
      h: document.documentElement.clientHeight - 50,
      left: 0,
      tableData: [
        {
          index: ''
        }
      ]
    }
  },
  computed: {},
  mounted() {
    this.totalCount = this.AIdata.length
    console.log('this.AIdata', this.AIdata)
    let i = 1
    this.tableData = []
    this.AIdata.forEach((element, index) => {
      this.tableData.push({
        index: `可疑${i++}(${element.option.probablity})`,
        data: element.data,
        id: element.id,
        inIndex: index + 1
      })
    })
    if (this.tableData.length > 0) {
      setTimeout(() => {
        this.setCurrent(this.tableData[0])
      }, 800)
    }
  },
  methods: {
    locatedToFirstAnno() {
      let _this = this
      if (_this.tableData && _this.tableData.length > 0) {
        _this.handleCurrentChange(_this.tableData[0])
      }
    },
    locatedToParticularIndex(item) {
      let _this = this
      const index = item.inIndex
      _this.changeIndex = index
      _this.handleCurrentChange(item)
      if (index % this.pageSize === 0) {
        _this.pageCurrent = (index - (index % _this.pageSize)) / _this.pageSize
      } else {
        _this.pageCurrent = (index - (index % _this.pageSize)) / _this.pageSize + 1
      }
    },
    tableRowClass(row) {
      let _this = this
      if (row.row.inIndex === _this.changeIndex) {
        _this.setCurrent(row.row)
      }
      return 'tableRowClass'
    },
    getIndex(index) {
      return (this.pageCurrent - 1) * this.pageSize + index + 1
    },
    pageJumpTo(val) {
      this.pageCurrent = val
    },
    pagesizeChange(val) {
      this.pageSize = val
    },
    resize(newRect) {
      this.width = newRect.width
      this.height = newRect.height
      this.top = newRect.top
      this.left = newRect.left
    },
    handleCurrentChange(val) {
      if (!!val) {
        this.changeIndex = val.inIndex
        this.$emit('jumpTo', val)
      }
    },
    // 改变当前行背景色
    setCurrent(val) {
      this.$refs.AIF.setCurrentRow(val)
    },
    //下一个可疑点
    nextSuspicious(inIndex) {
      this.changeIndex = inIndex
      const val = this.tableData.find(item => {
        return item.inIndex === inIndex
      })
      if (!!val) {
        this.handleCurrentChange(val)
        this.$refs.AIF.setCurrentRow(val)
        if (inIndex % this.pageSize === 0) {
          this.pageCurrent = (inIndex - (inIndex % this.pageSize)) / this.pageSize
        } else {
          this.pageCurrent = (inIndex - (inIndex % this.pageSize)) / this.pageSize + 1
        }
      }
    },
    //上一个可疑点
    previousSuspicious(inIndex) {
      this.changeIndex = inIndex
      const val = this.tableData.find(item => {
        return item.inIndex === inIndex
      })
      if (!!val) {
        this.handleCurrentChange(val)
        this.$refs.AIF.setCurrentRow(val)
        if (inIndex % this.pageSize === 0) {
          this.pageCurrent = (inIndex - (inIndex % this.pageSize)) / this.pageSize
        } else {
          this.pageCurrent = (inIndex - (inIndex % this.pageSize)) / this.pageSize + 1
        }
      }
    },
    //table每行的颜色控制
    isRed({ row, rowIndex }) {
      for (let i = 0; i < this.AIdata.length; i++) {
        if (rowIndex == i) {
          return {
            color: this.AIdata[i].option.color == '#F4FA58' ? '#000' : this.AIdata[i].option.color
          }
        }
      }
    }
  }
}
</script>
<style>
.el-pagination--small .btn-next,
.el-pagination--small .btn-prev,
.el-pagination--small .el-pager li,
.el-pagination--small .el-pager li.btn-quicknext,
.el-pagination--small .el-pager li.btn-quickprev,
.el-pagination--small .el-pager li:last-child {
  min-width: 12px;
}

.tableRowClass {
  background-color: rgba(255, 255, 255, 0.2) !important;
}

.tableRowClassRed {
  background-color: rgba(248, 14, 14, 0.2) !important;
}

.tableRowClass .el-table th,
.el-table tr {
  background-color: rgba(255, 255, 255, 0.2);
}

.el-table__body tr.current-row > td {
  background-color: rgba(248, 14, 14, 0.2) !important;
}
</style>
